<template>
  <div class="app-container">
    <el-dialog v-dialogDrag :visible.sync="dialogVisible" title="BOM详情" width="800px" :close-on-click-modal="false">
      <el-row>
        <el-table :data="tableData" border stripe height="450px" v-loading="loading" row-key="id" :default-expand-all="true" :tree-props="{ children: 'children', hasChildren: false }">
          <el-table-column label="物料名称" prop="materialName"></el-table-column>
          <el-table-column label="物料编码" prop="materialCode"></el-table-column>
          <el-table-column label="工序" prop="procedureNameStr"></el-table-column>
          <el-table-column label="单位" prop="unit"></el-table-column>
          <el-table-column label="组成数量" prop="numbers"></el-table-column>
        </el-table>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {},
  data() {
    return {
      dialogVisible: false,
      tableData: [],
      loading: false,
      oneTableInfo: {}
    }
  },
  watch: {},
  mounted() {},
  methods: {
    /**
     * @description:  open dialog
     * @param {*} row
     * @return {*}
     */
    showDialog(row) {
      this.dialogVisible = true
      this.getTable(row.bomId)
      this.oneTableInfo = Object.assign({}, row)
    },
    /**
     * @description:  获取表格
     * @param {*} id
     * @return {*}
     */
    async getTable(id) {
      this.loading = true
      const res = await this.$axios.get(`/pro/bom/getStructure?id=${id}`)
      if (res?.data.code === 200) {
        this.tableData = res.data.data
        this.loading = false
      }
    }
  }
}
</script>
<style lang='scss' scoped>
</style>